﻿@model SMECustomerWebsite.Models.ViewModels.ProductHandbook.ProductHandbookChecklistViewModel
<ul id="menu_product_handbook_detail" class="nav nav-tabs bar_tabs sme-tabs" role="tablist">
    @*<li role="presentation" class="">
        @Html.ActionLink(@SMECustomerWebsite.Core.Resources.Resource.ProHandbookProDetailInfoTab, "ProductDetail", "ProductHandbook", new { productid = Request.QueryString["productid"] }, null)
    </li>*@
    <li role="presentation" class="active">
        @Html.ActionLink(@SMECustomerWebsite.Core.Resources.Resource.ProHandbookProDetailChecklistTab, "Checklist", "ProductHandbook", new { productid = Request.QueryString["productid"] }, null)
    </li>
</ul>
<div class="row">
    <div class="col-md-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>CHECKLIST CUSTOMER</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li>
                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <!--question checklist-->
                <div id="div_question_checklist" class="row">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>@SMECustomerWebsite.Core.Resources.Resource.ChecklistQuestionTitle</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li>
                                    <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <form id="cust_checklist_question" method="post" class="form-horizontal form-label-left">
                                @foreach (var item in Model.listQuestion)
                                {
                                    <div class="form-group">
                                        <label class="control-label" style="text-align:left">@item.Title </label>
                                        <div id="gender" class="btn-group" data-toggle="buttons" style="float:right;">
                                            <p>
                                                Yes:
                                                <input type="radio" class="flat" name="question_@item.QuestionId" value="Y" checked="" required /> No:
                                                <input type="radio" class="flat" name="question_@item.QuestionId" value="N" />
                                            </p>
                                        </div>
                                    </div>
                                }
                            </form>
                        </div>
                    </div>
                </div>

                <!-- check list -->
                <div id="div_checklist_customer" class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>@SMECustomerWebsite.Core.Resources.Resource.ChecklistDocTitle <span id="sub_product_name">Loan Auto A1</span></h2>
                                @Html.Hidden("sub_product_id", "0")
                                <ul class="nav navbar-right panel_toolbox">
                                    <li>
                                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                    </li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <table id="checklist_document" class="custom_table table table-striped jambo_table bulk_action">
                                        <thead>
                                            <tr class="headings">
                                                <th class="column-title">Hồ sơ </th>
                                                <th class="column-title">Bản gốc</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.ChecklistDocumentHeader.ToUpper()</th>
                                                <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.ChecklistOrigiHeader.ToUpper()</th>
                                                <th class="column-title" data-toggle="tooltip" data-placement="top" title="" data-original-title="@SMECustomerWebsite.Core.Resources.Resource.ChecklistCopyHeaderTooltip">@SMECustomerWebsite.Core.Resources.Resource.ChecklistCopyHeader.ToUpper()</th>
                                                <th class="column-title" data-toggle="tooltip" data-placement="top" title="" data-original-title="@SMECustomerWebsite.Core.Resources.Resource.ChecklistDuplicateHeaderTooltip">@SMECustomerWebsite.Core.Resources.Resource.ChecklistDupHeader.ToUpper()</th>
                                                <th class="column-title" width="30%">@SMECustomerWebsite.Core.Resources.Resource.ChecklistNoteHeader.ToUpper()</th>
                                                <th class="column-title last">@SMECustomerWebsite.Core.Resources.Resource.ChecklistSamplePhotoHeader.ToUpper()</th>
                                                <th class="bulk-actions" colspan="7">
                                                    <a class="antoo" style="color:#fff; font-weight:500;">Bulk Actions ( <span class="action-cnt"> </span> )</a>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- End to do list -->
</div>
@section scripts
{
    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="~/Scripts/vendors/fancyImage/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="~/Scripts/vendors/fancyImage/jquery.fancybox.css" media="screen" />
    <!-- Switchery -->
    <script src="~/Scripts/vendors/switchery/dist/switchery.min.js"></script>
    <!-- iCheck -->
    <script src="~/Scripts/vendors/iCheck/icheck.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

        })
        //show document image
        function showDocumentPicture(picName) {
            var arrPic = picName.split(",");
            var arrFancy = [];
            arrPic.forEach(function (entry) {
                arrFancy.push({
                    href: '/Scripts/vendors/fancyImage/@Request.QueryString["productid"]/' + entry
                })
            });
            $.fancybox.open(arrFancy, {
                helpers: {
                    thumbs: {
                        width: 75,
                        height: 50
                    }
                }
            });
        };

        function showMore(id) {
            if ($("#more" + id + "").text() == "...(more)") {
                $("#complete" + id + "").show();
                $("#more" + id + "").text(" (less)");
            } else {
                $("#complete" + id + "").hide();
                $("#more" + id + "").text("...(more)");
            }
        }

        $('#cust_checklist_question').submit(function (e) {

            var formData = $(this).serialize();
            formData = formData.replace(/&/g, "^");

            $.ajax({
                url: '@Url.Action("SubmitQuestion", "ProductHandbook")' + '?data=' + formData + '&productId=@Request.QueryString["productid"]',
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                contentType: false,
                processData: false,
                success: function (result) {
                    // here in result you will get your data
                    var lResult = result[result.length - 1];
                    //document.getElementById("sub_product_id").value = lResult[0];
                    $('#sub_product_id').val(lResult[0]);
                    $('#sub_product_name').text(lResult[1]);
                    result.splice(-1, 1);
                    var visibleColumn = [0, 1];
                    var table = $('#checklist_document').DataTable({
                        bFilter: false,
                        bInfo: false,
                        bPaginate: false,
                        "responsive": true,
                        "bAutoWidth": false,
                        //"order": [[8, 'asc']],
                        //"bServerSide": true,
                        destroy: true,
                        //"bProcessing": true,
                        "data": result,
                        destroy: true,
                        fixedHeader: true,
                        "aoColumns": [
                                    { "sName": "CIF", "bSortable": false },
                                    { "sName": "NAME", "bSortable": false },
                                    { "sName": "CIF", "bSortable": false },
                                    { "sName": "NAME", "bSortable": false },
                                    { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                                    { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                                    { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                                    { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                                    { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false }],
                        "columnDefs": [{
                            "sClass": "a-center ",
                            "aTargets": 2,
                            "mRender": function (data, type, full) {
                                return '<input type="checkbox" class="flat" name="chkbox_checklist_' + full[9] + '">';
                            }
                        }, {
                            "sClass": "a-center ",
                            "aTargets": 7,
                            "bAutoWidth": false,
                            "mRender": function (data, type, full) {
                                if (data != null && data.length > 50) {
                                    return '<span class="teaser">' + data.substring(0, 50) + '</span><span class="complete" id="complete' + full[9] + '">' + data.substring(50, data.length) + '</span><span id="more' + full[9] + '" class="more"  onclick=\"showMore(\'' + full[9] + '\' );\">...(more)</span>';
                                } else {
                                    return data;
                                }

                            }
                        }, {
                            "sClass": "a-center ",
                            "aTargets": 8,
                            "mRender": function (data, type, full) {
                                if (data != null && data.length > 0) {
                                    return '<a class="btn btn-primary btn-xs" onclick="showDocumentPicture(\'' + full[8] + '\');"><i class="fa fa-eye"></i></a>';
                                } else {
                                    return data;
                                }
                            }
                        }, {
                            "visible": false, "targets": visibleColumn
                        }],
                        "drawCallback": function (settings) {
                            var api = this.api();
                            var rows = api.rows({ page: 'current' }).nodes();
                            var last = null;

                            api.column(0, { page: 'current' }).data().each(function (group, i) {
                                if (last !== group) {
                                    $(rows).eq(i).before(
                                        '<tr class="smes_parent"><td colspan="27">' + group + '</td></tr>'
                                    );
                                    last = group;
                                }
                            });
                            api.column(1, { page: 'current' }).data().each(function (group, i) {
                                if (last !== group && group != null) {
                                    $(rows).eq(i).before(
                                        '<tr class="smes_parent"><td colspan="27">' + group + '</td></tr>'
                                    );
                                    last = group;
                                }
                            });
                        }
                    });
                    $('#div_question_checklist').hide();
                    $('#div_checklist_customer').show();
                    table.fixedHeader.enable();
                },
                error: function (result) {

                }
            });
            e.preventDefault()
        });

        function submitData() {
            var data = $('[name^=chkbox_checklist_]');
            var content = [];
            content.push([$('#custCif').val(), $('#custName').val(), $('#legalId').val()]);
            data.each(function (index, item) {
                var row = [];
                row.push(item.name);
                row.push(item.checked);
                content.push(row);
            });
            var jsonData = JSON.stringify(content);
            $.ajax({
                url: '@Url.Action("SubmitData", "ProductHandbook")',
                type: "POST",
                data: { dataedit: jsonData, productName: $('#sub_product_id').val() },
                success: function (data_response) {
                    if (data_response == true) {
                        window.location.replace("@Url.Action("Checklist", "ProductHandbook", new { productid = Request.QueryString["productid"] })");
                    }
                }
            })
            return false;
        }
        $("#custCif").select2({
            ajax: {
                url: "@Url.Action("GetListCustomer", "CustomerManager")",
                dataType: 'json',
                type: "POST",
                delay: 250,
                data: function (params) {
                    return {
                        searchText: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function (data, params) {
                    // parse the results into the format expected by Select2
                    // since we are using custom formatting functions we do not need to
                    // alter the remote JSON data, except to indicate that infinite
                    // scrolling can be used
                    params.page = params.page || 1;

                    //var select2Data = $.map(data, function (obj) {
                    //    obj.id = data.id;
                    //    obj.text = data.custName;

                    //    return obj;
                    //});
                    return {
                        results: data,
                        pagination: {
                            //more: (params.page * 30) <
                        }
                    };
                },
                cache: true
            },
            placeholder: "Search By Name",
            allowClear: true,
            escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
            minimumInputLength: 1,
            templateResult: formatRepo, // omitted for brevity, see the source of this page
            templateSelection: formatRepoSelection // omitted for brevity, see the source of this page,
        });

        $("#custCif").val(null).trigger("change");
        function formatRepo(repo) {
            if (repo.loading) return repo.text;

            var markup = "<div class='select2-result-repository clearfix'>" +
              "<div class='select2-result-repository__meta'>" +
                "<div class='select2-result-repository__title'>" + repo.id + "</div>";

            markup += "<div class='select2-result-repository__description'>" + repo.custName + "</div>";

            markup += "<div class='select2-result-repository__statistics'>" +
              "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.legalId + "</div>" +
            "</div>" +
            "</div></div>";

            return markup;
        }
        var initSelection = function (elem, cb) {
            console.log(elem)
            return elem
        }
        function formatRepoSelection(repo) {
            if (repo.text != null && repo.text != 'Search By Name') {
                $('#custName').val(repo.custName);
                $('#custName').attr('disabled', 'disabled');
                $('#legalId').val(repo.legalId);
                $('#legalId').attr('disabled', 'disabled');
            } else {
                $('#custName').removeAttr('disabled');
                $('#custName').val('');
                $('#legalId').removeAttr('disabled');
                $('#legalId').val('');
            }

            return repo.text;
        }

    </script>
}
